import { useParams } from "react-router-dom";
import { useEffect, useState } from 'react'
import axios from 'axios';
import { Breadcrumb, Avatar, Menu } from 'antd';
import { Link } from "react-router-dom";
import StarRating from './StarRating';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  LogoutOutlined,
  UserOutlined
} from '@ant-design/icons';
import './index.scss';
import StudentList from "./StudentList";
import HomeworkList from "./HomeworkList";
const CourseDetailPagestu = () => {
  let { id } = useParams(); // 使用useParams hook获取URL参数中的id
  const [hovered, setHovered] = useState(false);
  const [teacherData, setteacherData] = useState(null);
  const [studentData, setstudentData] = useState(null);
  const [courseData, setcourseData] = useState("1");
  const [activeComponent, setActiveComponent] = useState('');
  useEffect(() => {
    const courseid = id;
    axios.post('http://localhost:8000/gettaketeacher', { courseid: courseid })
    .then(response => {
      // 处理从后端返回的数据
      console.log(response.data);
      setteacherData(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
    axios.post('http://localhost:8000/courseinformation', { courseid: courseid })
    .then(response => {
      // 处理从后端返回的数据
      console.log(response.data);
      setcourseData(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }, []);

  const handleClickMenu = (e) => {
    setActiveComponent(e.key);
  };

 
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to="/Layoutstudent/coursepage">Courses</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>课程名称：{courseData[0].coursename}</Breadcrumb.Item>
      </Breadcrumb>
  
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',marginRight:100 }}>
        <h1>{courseData[0].coursename}</h1>
        <StarRating />
      </div>
  
      <p>ID: {id}</p>
      <p>授课教师: {teacherData &&teacherData.map(teacher => teacher.username).join(', ')}</p>
  
      <Avatar.Group maxCount={2}>
        {teacherData &&
          teacherData.map(teacher => (
            <Avatar
              key={teacher.id}
              size={48}
              src={teacher.avatar ? `http://localhost:8000/${teacher.avatar}` : undefined}
              icon={!teacher.avatar && <UserOutlined />}
            />
          ))}
      </Avatar.Group>
  
      <div style={{ display: 'flex' }}>
        <div style={{ position: 'relative', display: 'inline-block', width: '30%', height: '200px' }}>
          <img
            src={courseData[0].img ? `http://localhost:8000/${courseData[0].img}` : "http://localhost:8000/class/669ca80d6a0c5f74835bb936a41aabca.jpg"}
            alt="Course Image"
            style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'blur(3px)' : 'none' }}
          />
        </div>
  
        <div className="information" style={{ marginLeft: '2rem' }}>
          <p>属性:{courseData[0].attribute}</p>
          <p>开课学院:{courseData[0].college}</p>
          <p>开课学期:{courseData[0].term}</p>
          <p>课程节数:{courseData[0].number}</p>
          <p>上课时间:{courseData[0].time}</p>
          <p>上课地点:{courseData[0].location}</p>
          <p>开课学院:{courseData[0].college}</p>
          <p>学生人数:{courseData[0].num}/{courseData[0].studentnum}</p>
        </div>
      </div>
      <Menu onClick={handleClickMenu} mode="horizontal">
        <Menu.Item key="studentList">学生名单</Menu.Item>
        <Menu.Item key="HomeworkList">作业列表</Menu.Item>
        {/* Add other menu items as needed */}
      </Menu>
      <div style={{ display: 'flex' }}>
        {/* Content display based on selected menu item */}
        {activeComponent === 'studentList' && <StudentList/>}
        {activeComponent === 'HomeworkList' && <HomeworkList/>}
        {/* Add content for other menu items as needed */}
      </div>
    </div>
  );
  
  
};
export default CourseDetailPagestu;